<template>
  <Card dis-hover :bordered="false">
    <Form>
      <Row :gutter="24" type="flex" class="ivu-mb-16">
        <Col>
          <Button
            v-hasC="{
              name: 'v1-automation-clue-update-clue',
              flag: 'v1/automation/clue/update-clue',
            }"
            type="primary"
            @click="handleOpenDrawer(-1)"
            >新增</Button
          >
        </Col>
      </Row>
    </Form>
    <div class="i-table-no-border">
      <Table
        highlight-row
        ref="table"
        :columns="columns"
        :loading="loading"
        :data="data"
      >
        <template slot="room" slot-scope="{ row }">
          <Tooltip placement="top-start" :max-width="300">
            <template v-for="(item, index) in row.channel_name">
              <tag v-if="index <= 2" :key="index">{{ item }}</tag>
            </template>
            <div slot="content">
              <tag v-for="(item, index) in row.channel_name" :key="index">{{
                item
              }}</tag>
            </div>
          </Tooltip>
        </template>
        <template slot-scope="{ row }" slot="info">
          <a
            v-hasC="{
              name: 'v1-automation-clue-update-clue2',
              flag: 'v1/automation/clue/update-clue',
            }"
            href="javaScript:;"
            @click="handleOpenDrawer(row)"
            >编辑</a
          >
          <Divider
            v-hasCC="[
              {
                name: 'v1-automation-clue-update-clue2',
                flag: 'v1/automation/clue/update-clue',
              },
              {
                name: 'v1-automation-clue-delete-clue',
                flag: 'v1/automation/clue/delete-clue',
              },
            ]"
            type="vertical"
          />
          <a
            v-hasC="{
              name: 'v1-automation-clue-delete-clue',
              flag: 'v1/automation/clue/delete-clue',
            }"
            @click="deletePush(row)"
            >删除</a
          >
        </template>
      </Table>
      <!-- <div class="ivu-mt ivu-text-center">
                <Page show-total show-elevator show-sizer :total="total" :current.sync="params.page"
                      :page-size="params.pageSize" :page-size-opts="pageOpts" @on-change="formSize"
                      @on-page-size-change="formChangePage" />
            </div> -->
      <Modal
        v-model="modal"
        width="650"
        :title="edit ? `编辑` : `新增`"
        :mask-closable="false"
        @on-cancel="handleDrawerCancel(modalname)"
      >
        <Form
          :ref="modalname"
          :model="formItem"
          :rules="createRules"
          :label-width="100"
        >
          <FormItem label="渠道" prop="channel_id">
            <Select v-model="formItem.channel_id" multiple>
              <OptionGroup
                :label="item.label"
                v-for="item in channelList"
                :key="item.value"
              >
                <Option
                  v-for="it in item.children"
                  :value="it.value"
                  :key="it.value"
                  >{{ it.label }}</Option
                >
              </OptionGroup>
            </Select>
          </FormItem>
          <FormItem label="字段" prop="filed">
            <Select v-model="formItem.filed" multiple>
              <Option
                v-for="it in filedList"
                :value="it.value"
                :key="it.value"
                >{{ it.title }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="钉钉token：" prop="dingtalk_id">
            <Input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              v-model="formItem.dingtalk_id"
              placeholder="请输入钉钉token"
            />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="handleDrawerCancel(modalname)">取消</Button>
          <Button
            type="primary"
            :loading="remarksloading"
            @click="handleSubmit(modalname)"
            >确定</Button
          >
        </div>
      </Modal>
    </div>
  </Card>
</template>

<script>
import {
  clueIndex,
  updateClue,
  filedList,
  deleteClue,
} from "@/api/TApi/index.js";
import { marketingconsumegetsourcechannellist } from "@api/hqapi/networkMarketing.js";
export default {
  /*  import引入的组件注入到components对象中使用  */
  components: {},
  data() {
    const validateToken = (rule, value, callback) => {
      if (value.includes("https://")) {
        callback();
      } else {
        callback(new Error("请正确输入包含https的钉钉token"));
      }
    };
    return {
      total: 0, //  分页总数
      remarksloading: false,
      pageOpts: [10, 20, 30, 50], //  分页每页数量
      params: { page: 1, pageSize: 10 }, //  请求参数
      edit: true, //  编辑true,新增false
      loading: false, //  加载中
      modal: false, //  模态框开启属性
      modalname: "formItem",
      grid: { xl: 4, lg: 8, md: 12, sm: 24, xs: 24 }, //  layout布局

      filedList: [],
      columns: [
        {
          title: "渠道",
          slot: "room",
          tooltip: true,
          ellipsis: true,
          minWidth: 118,
        },
        {
          title: "钉钉机器人token",
          key: "dingtalk_id",
          tooltip: true,
          minWidth: 300,
        },

        {
          title: "更新时间",
          key: "updated_at",
          minWidth: 150,
        },
        {
          title: "操作人",
          key: "operation_name",
          width: 100,
        },
        { title: "操作", slot: "info", width: 150 },
      ], // 列表表头
      data: [], // 列表数据
      department: [],
      formItem: {
        id: "",
        channel_id: [],
        dingtalk_id: "",
        filed: [],
      },
      channelList: [],
      // 模态框数据
      createRules: {
        dingtalk_id: [
          {
            validator: validateToken,
            trigger: "blur",
            required: true,
            // message: "请输入钉钉token",
            // trigger: "blur",
          },
        ],
        channel_id: [
          {
            required: true,
            message: "请选渠道类型",
            type: "array",
            trigger: "change",
          },
        ],
        filed: [
          {
            required: true,
            message: "请选字段",
            type: "array",
            trigger: "change",
          },
        ],
      }, // 模态框验证规则
    };
  },
  /* 监听属性 类似于data概念 */
  computed: {},
  watch: {},
  /* 创建完成能访问this实例 */
  created() {
    // this.channellist();
    // this._filedList();
  },
  /* 函数方法集合 */
  methods: {
    // 获取渠道
    // channellist(){
    //       marketingconsumegetsourcechannellist().then(res => {
    //             this.channelList = res;
    //         });
    // },
    _filedList() {
      filedList().then((res) => {
        this.filedList = res;
      });
    },
    /* @函数功能: 初始化 */
    initial() {
      this.askData();
    },
    /* @函数功能: 请求数据 */
    askData() {
      clueIndex().then((res) => {
        this.data = res.list;
        this.filedList = res.condition.filed_list;
        this.channelList = res.condition.source_channel;
        // this.total = res.total;
      });
    },
    deletePush(row) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "请确认是否删除线索提醒，删除后无法恢复",
        loading: true,
        onOk: () => {
          deleteClue({
            id: row.id,
          })
            .then((res) => {
              this.$Message.success("删除成功");
              this.$Modal.remove();
              this.askData();
            })
            .catch(() => {
              this.$Modal.remove();
            });
        },
      });
    },
    /* @函数功能: 分页 */
    formSize(e) {
      this.params.page = e;
      this.askData();
    },
    /* @函数功能: 每页数量 */
    formChangePage(e) {
      this.params.pageSize = e;
      this.askData();
    },
    /* @函数功能: 打开新增或编辑 */
    handleOpenDrawer(row) {
      this.$refs[this.modalname].resetFields();
      this.formItem.channel_id = [];
      this.formItem.filed = [];
      this.modal = true;
      if (row === -1) {
        this.edit = false;
      } else {
        this.edit = true;
        // this.isEdit = row;
        this.formItem.id = row.id;
        this.formItem.channel_id = row.channel_id.split(",");
        this.formItem.dingtalk_id = row.dingtalk_id;
        this.formItem.filed = row.field.split(",");
      }
    },
    /* @函数功能: 新增或编辑提交 */
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const params = {
            channel_id:
              this.formItem.channel_id.length > 0
                ? this.formItem.channel_id.join(",")
                : "",
            dingtalk_id: this.formItem.dingtalk_id,
            field:
              this.formItem.filed.length > 0
                ? this.formItem.filed.join(",")
                : "",
            id: this.formItem.id ? this.formItem.id : "",
          };
          if (this.edit) {
            updateClue(params).then((res) => {
              this.$Message.success("编辑成功");
              this.handleDrawerCancel(name);
              this.askData();
            });
          } else {
            updateClue(params).then((res) => {
              this.$Message.success("新增成功");
              this.handleDrawerCancel(name);
              this.askData();
            });
          }
        }
      });
    },
    /* @函数功能: 取消新增或编辑 */
    handleDrawerCancel(name) {
      this.$refs[name].resetFields();
      this.modal = false;
    },
  },
  /* 挂载完成能访问DOM元素 */
  mounted() {
    this.initial();
  },
};
</script>

<style lang="less" scoped></style>
